import 'package:flutter/material.dart';
import 'package:wy/utils/player_state.dart';
import 'package:wy/utils/screen_util.dart';
import 'package:wy/widgets/arc_progress.dart';

class HPlaying extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screen = Screen(context);
    final size = screen.calc(60);
    final borderWidth = screen.calc(3);
    final playState = PlayState.of(context);
    var percent = 0.0;

    if (playState.current != null && playState.total != null) {
      percent = playState.current / playState.total;
    }
    return Hero(
      tag: 'right_top_playing_icon',
      child: GestureDetector(
          onTap: () {
            Navigator.pushNamed(context, '/player', arguments: {'id': null});
          },
          child: Container(
            width: size,
            height: size,
            child: Stack(
              children: [
                Container(
                  margin: EdgeInsets.only(left: 3, top: 3),
                  width: size - 6,
                  height: size - 6,
                  decoration: BoxDecoration(
                      borderRadius:
                          BorderRadius.circular(screen.calc(size / 2)),
                      border: Border.all(
                          width: screen.calc(3), color: Color(0xffe5e5e5)),
                      // border: Border.all(width: screen.calc(3), color: Colors.red),
                      image: DecorationImage(
                        image: AssetImage('assets/images/tmp_icon_music.png'),
                      )),
                ),
                Positioned.fill(
                    child: ArcProgress(
                  percent: percent,
                  width: borderWidth,
                  color: Color(0xffff3a3a),
                  bgColor: Color(0xffe5e5e5),
                ))
              ],
            ),
          )),
    );
  }
}
